import React, { createContext, useContext, useState, useEffect } from 'react';

const ThemeContext = createContext();

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

// 主题配置
export const themes = {
  spring: {
    name: '春意绿',
    description: '清新自然的绿色主题',
    colors: {
      primary: '#22c55e',
      primaryHover: '#16a34a',
      primaryLight: '#dcfce7',
      primaryDark: '#15803d',
      gradient: 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
      gradientDark: 'linear-gradient(135deg, #15803d 0%, #14532d 100%)'
    }
  },
  ocean: {
    name: '海洋蓝',
    description: '深邃宁静的蓝色主题',
    colors: {
      primary: '#3b82f6',
      primaryHover: '#2563eb',
      primaryLight: '#dbeafe',
      primaryDark: '#1d4ed8',
      gradient: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
      gradientDark: 'linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%)'
    }
  },
  sunset: {
    name: '夕阳橙',
    description: '温暖活力的橙色主题',
    colors: {
      primary: '#f97316',
      primaryHover: '#ea580c',
      primaryLight: '#fed7aa',
      primaryDark: '#c2410c',
      gradient: 'linear-gradient(135deg, #f97316 0%, #ea580c 100%)',
      gradientDark: 'linear-gradient(135deg, #c2410c 0%, #9a3412 100%)'
    }
  },
  purple: {
    name: '紫罗兰',
    description: '优雅神秘的紫色主题',
    colors: {
      primary: '#8b5cf6',
      primaryHover: '#7c3aed',
      primaryLight: '#e9d5ff',
      primaryDark: '#6d28d9',
      gradient: 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)',
      gradientDark: 'linear-gradient(135deg, #6d28d9 0%, #581c87 100%)'
    }
  },
  rose: {
    name: '玫瑰粉',
    description: '浪漫温柔的粉色主题',
    colors: {
      primary: '#ec4899',
      primaryHover: '#db2777',
      primaryLight: '#fce7f3',
      primaryDark: '#be185d',
      gradient: 'linear-gradient(135deg, #ec4899 0%, #db2777 100%)',
      gradientDark: 'linear-gradient(135deg, #be185d 0%, #9d174d 100%)'
    }
  },
  emerald: {
    name: '翡翠绿',
    description: '清雅高贵的翡翠色主题',
    colors: {
      primary: '#10b981',
      primaryHover: '#059669',
      primaryLight: '#d1fae5',
      primaryDark: '#047857',
      gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
      gradientDark: 'linear-gradient(135deg, #047857 0%, #065f46 100%)'
    }
  },
  aurora: {
    name: '极光蓝',
    description: '神秘绚烂的极光渐变',
    colors: {
      primary: '#06b6d4',
      primaryHover: '#0891b2',
      primaryLight: '#cffafe',
      primaryDark: '#0e7490',
      gradient: 'linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%)',
      gradientDark: 'linear-gradient(135deg, #0e7490 0%, #1d4ed8 50%, #6d28d9 100%)'
    }
  },
  coral: {
    name: '珊瑚橙',
    description: '温暖活泼的珊瑚色渐变',
    colors: {
      primary: '#ff6b6b',
      primaryHover: '#ff5252',
      primaryLight: '#ffe0e0',
      primaryDark: '#d63031',
      gradient: 'linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #ff6b9d 100%)',
      gradientDark: 'linear-gradient(135deg, #d63031 0%, #e17055 50%, #e84393 100%)'
    }
  },
  forest: {
    name: '森林绿',
    description: '深邃自然的森林渐变',
    colors: {
      primary: '#059669',
      primaryHover: '#047857',
      primaryLight: '#d1fae5',
      primaryDark: '#065f46',
      gradient: 'linear-gradient(135deg, #059669 0%, #0d9488 50%, #0891b2 100%)',
      gradientDark: 'linear-gradient(135deg, #065f46 0%, #0f766e 50%, #0e7490 100%)'
    }
  },
  lavender: {
    name: '薰衣草',
    description: '优雅浪漫的薰衣草渐变',
    colors: {
      primary: '#a855f7',
      primaryHover: '#9333ea',
      primaryLight: '#f3e8ff',
      primaryDark: '#7c3aed',
      gradient: 'linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #f97316 100%)',
      gradientDark: 'linear-gradient(135deg, #7c3aed 0%, #be185d 50%, #c2410c 100%)'
    }
  },
  midnight: {
    name: '午夜蓝',
    description: '深邃神秘的午夜渐变',
    colors: {
      primary: '#1e40af',
      primaryHover: '#1d4ed8',
      primaryLight: '#dbeafe',
      primaryDark: '#1e3a8a',
      gradient: 'linear-gradient(135deg, #1e40af 0%, #3730a3 50%, #581c87 100%)',
      gradientDark: 'linear-gradient(135deg, #1e3a8a 0%, #312e81 50%, #4c1d95 100%)'
    }
  },
  cherry: {
    name: '樱花粉',
    description: '温柔甜美的樱花渐变',
    colors: {
      primary: '#f472b6',
      primaryHover: '#ec4899',
      primaryLight: '#fce7f3',
      primaryDark: '#db2777',
      gradient: 'linear-gradient(135deg, #f472b6 0%, #fb7185 50%, #fbbf24 100%)',
      gradientDark: 'linear-gradient(135deg, #db2777 0%, #e11d48 50%, #d97706 100%)'
    }
  }
};

export const ThemeProvider = ({ children }) => {
  const [isDark, setIsDark] = useState(false);
  const [currentTheme, setCurrentTheme] = useState('spring');

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    const savedColorTheme = localStorage.getItem('colorTheme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    
    // 恢复暗色模式设置
    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
      setIsDark(true);
      document.documentElement.classList.add('dark');
    }
    
    // 恢复颜色主题设置
    if (savedColorTheme && themes[savedColorTheme]) {
      setCurrentTheme(savedColorTheme);
    }
  }, []);

  useEffect(() => {
    // 应用主题颜色到CSS变量
    const theme = themes[currentTheme];
    const root = document.documentElement;
    
    root.style.setProperty('--color-primary', theme.colors.primary);
    root.style.setProperty('--color-primary-hover', theme.colors.primaryHover);
    root.style.setProperty('--color-primary-light', theme.colors.primaryLight);
    root.style.setProperty('--color-primary-dark', theme.colors.primaryDark);
    root.style.setProperty('--gradient-primary', theme.colors.gradient);
    root.style.setProperty('--gradient-primary-dark', theme.colors.gradientDark);
    
    // 更新data属性用于CSS选择器
    root.setAttribute('data-theme', currentTheme);
  }, [currentTheme]);

  const toggleDarkMode = () => {
    setIsDark(!isDark);
    if (!isDark) {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    }
  };

  const changeTheme = (themeName) => {
    if (themes[themeName]) {
      setCurrentTheme(themeName);
      localStorage.setItem('colorTheme', themeName);
    }
  };

  return (
    <ThemeContext.Provider value={{ 
      isDark, 
      toggleDarkMode,
      currentTheme,
      changeTheme,
      themes,
      toggleTheme: toggleDarkMode // 保持向后兼容
    }}>
      {children}
    </ThemeContext.Provider>
  );
};
